import { Tilt } from "react-tilt";
import { motion } from "framer-motion";
import { styles } from "../styles";
import { gitee } from "../assets";
import { SectionWrapper } from "../hoc";
import { projects } from "../constants/index.js";
import { fadeIn, textVariant } from "../utils/motion.js";

const ProjectCard = ({ index, name, description, tags, image, source_code_link }) => {
  return (
    <motion.div variants={fadeIn("up", "spring", index * 0.5, 0.75)}>
      <Tilt options={{ max: 45, scale: 1, speed: 450 }} className={"bg-tertiary p-5 rounded-2xl sm:w-[360px] w-full"}>
        <div className={"relative w-full h-[320px]"}>
          <img src={image} alt={name} className={"w-full h-full object-cover rounded-2xl"} />
          <div className={"absolute inset-0 flex justify-end m-3 card-img_hover"}>
            <div onClick={() => window.open(source_code_link, "_blank")}
                 className={"w-10 h-10 rounded-full flex justify-center items-center cursor-pointer"}>
              <img src={gitee} alt="github" className={"object-contain"} />
            </div>
          </div>
        </div>
        <div className={"mt-5"}>
          <h3 className={"text-white font-bold text-[24px]"}>{name}</h3>
          <p className={"mt-2 text-secondary text-[14px]"}>{description}</p>
        </div>
        <div className={"mt-4 flex flex-wrap gap-2"}>
          {tags.map((tag) => (
            <p key={tag.name} className={`text-[14px] ${tag.color}`}>
              #{tag.name}
            </p>
          ))}
        </div>
      </Tilt>
    </motion.div>
  );

};

const Works = () => {
  return (
    <>
      <motion.div
        variants={textVariant()}
      >
        <p className={styles.sectionSubText}>My projects</p>
        <h2 className={styles.sectionHeadText}>个人项目.</h2>
      </motion.div>
      <div className={"w-full flex"}>
        <motion.p
          variants={fadeIn("", "", 0.1, 1)}
          className={"mt-3 text-secondary text-[17px] max-w-3xl leading-[30px]"}
        >
          以下项目通过我工作的真实例子展示了我的技能和经验。每个项目都有简短的描述，其中有代码库和实时演示的链接.
        </motion.p>
      </div>
      <div className={"mt-20 flex flex-wrap gap-7"}>
        {projects.map((project, index) => (
          <ProjectCard key={`project-${index}`} {...project} index={index} />
        ))}
      </div>
    </>
  );
};

export default SectionWrapper(Works, "");